<template>
  <div class="form-container">
    <h2>Docx文件模板表单</h2>
    <button @click="submitForm" class="update">提交</button>

    <!-- <div class="form-group">
      <label for="id">ID:</label>
      <input id="id" v-model="template.id" disabled class="id">
    </div> -->

    <div class="form-group">
      <label for="name">名称:</label>
      <input id="name" v-model="template.name" required>
    </div>

    <div class="form-group">
      <label for="identifiers">唯一字符:</label>
      <div v-for="(item, index) in identifiers" :key="index">
        <input v-model="identifiers[index]" class="identifierInput">
        <button @click="removeIdentifier(index)">删除</button>
      </div>
      <button @click="addIdentifier" class="addIndentifier">添加唯一字符</button>
    </div>

    <div class="form-group">
      <label for="archivePath">存档路径:</label>
      <input id="archivePath" v-model="template.archivePath" required>
    </div>

    <h3>查找数据（字符串和数字对象）</h3>
    <div v-for="(item, index) in template.findDataWithStringAndNumberObjects" :key="index" class="find-data-item">
      <div class="form-group-inline">
        <label>匹配字符:</label>
        <input v-model="item.tag" required class="short-input">
      </div>
      <div class="form-group-inline">
        <label>索引增值:</label>
        <input v-model="item.addIndex" required class="short-input">
      </div>
      <div class="form-group-inline">
        <label>替换路径字符串:</label>
        <input v-model="item.replacePathString" required class="short-input">
      </div>
      <div class="form-group-inline">
        <label>用途</label>
        <input v-model="item.usage" required class="short-input">
      </div>
      <div class="form-group-inline">
        <label>是否提取公有字:</label>
        <input type="checkbox"  @change="handleChange(item)">
      </div>
      <!-- <div class="form-group-inline">
        <label>用途:</label>
        <textarea v-model="item.usage" required class="short-textarea"></textarea>
      </div> -->
      <!-- <div class="form-group-inline">
        <label>有用的字符串:</label>
        <textarea v-model="item.usefulString" required class="short-textarea"></textarea>
      </div> -->
      <button @click="removeItem(index)" class="deleteButton">删除</button>
      <button @click="addItem" class="addButton">添加</button>
    </div>
  </div>
</template>

<script>

import DocxFileTemplate from '../../class/docxclass/DocxFileTemplate'; // 根据实际路径调整
import { submitTemplates } from '../../services/DocxService/DocxApi';

export default {
  data() {
    return {
      identifiers: ['', '', ''],
      template: new DocxFileTemplate('', '', '', [
        {
          tag: '',
          addIndex: '',
          replacePathString: '',
          extractCommonFeature: "",
          usage: '文件名/文件路径',
          usefulString: ''
        }
      ], [])

    };
  },
  methods: {
    handleChange(item) {
      if(item.extractCommonFeature==="1"){
        item.extractCommonFeature="0";
      }else{
        item.extractCommonFeature="1";
      }
      console.log(item.extractCommonFeature);
    },
    addItem() {
      this.template.findDataWithStringAndNumberObjects.push({
        tag: '',
        addIndex: '',
        replacePathString: '',
        extractCommonFeature: '',
        usage: '',
        usefulString: ''
      });
    },
    removeItem(index) {
      this.template.findDataWithStringAndNumberObjects.splice(index, 1);
    },
    addIdentifier() {
      this.identifiers.push('');
    },
    removeIdentifier(index) {
      this.identifiers.splice(index, 1);
    },
    // updateIdentifiers() {
    //   this.identifiers = this.identifiers.filter(identifier => identifier !== '');
    // },
    fillIdInputs() {
      if (this.template.id === '') {
        this.template.id = Date.now();
      }
    },
    async submitForm() {
      this.identifiers = this.identifiers.filter(item => item !== '');
      this.template.identifiers = this.identifiers;
      this.fillIdInputs();
      
      try {
        await submitTemplates(this.template);
        alert('模板数据发送成功');
      } catch (error) {
        alert('出错');
      }

    }

  },

  mounted() {

    // 初始化时添加三个默认的标识符
    // this.identifiers = ['', '', ''];
  }
};
</script>

<style scoped>
.form-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
}

input,
textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

button {
  padding: 8px 15px;
  background-color: #007BFF;
  color: #fff;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

.find-data-item {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 10px;
}

.short-input {
  width: 50%;
  /* 调整输入框的宽度 */
}

.short-textarea {
  width: 50%;
  /* 调整文本框的宽度 */
}

.form-group-inline {
  display: inline-block;
  width: 48%;
  /* 调整每个数据项的宽度，留出一些间距 */
  margin-right: 2%;
  /* 添加间距 */
  vertical-align: top;
  /* 顶部对齐 */
}

.identifierInput {
  width: 20%;
}

.update {
  background-color: #ff5500;
}

.addButton {
  margin-left: 10px;
  margin-top: 10px;
}

.deleteButton {
  margin-top: 10px;
}

.addIndentifier {
  margin-top: 10px;
}
</style>
